<template>
  <div style="font-size: 0.35rem">
    <p
      style="
        text-align: center;
        height: 1rem;
        background: #fff;
        line-height: 1rem;
        position: sticky;
        top: 0;
        z-index: 99999999;
      "
    >
      <span @click="out" style="float: left; margin-left: 0.2rem"><</span
      >图文咨询
    </p>
    <div style="padding-left: 0.4rem">
      <h2>请选择为谁咨询</h2>
      <div>
        <div v-if="name" style="display: flex">
          <div
            style="
              width: 3.4rem;
              height: 1.5rem;
              background: #f3f3f3;
              padding-left: 0.2rem;
              padding-top: 0.2rem;
              border: 0.01rem solid #c1c1c1;
              margin-right: 0.4rem;
            "
            class="wen"
            @click="start"
          >
            <p>
              <span style="font-size: 0.4rem">{{ name }}</span>
              <span
                style="margin-left: 0.2rem; color: #c1c1c1; font-size: 0.32rem"
                >({{ doctor }})</span
              >
            </p>
            <p>{{ age }} {{ ab }} {{ sex }}</p>
          </div>
          <div
            style="width: 3rem; height: 1.5rem; border: 0.01rem dashed #c1c1c1"
          >
            <p
              @click="add"
              style="
                text-align: center;
                line-height: 1.5rem;
                font-size: 0.4rem;
                color: #c1c1c1;
              "
            >
              +添加
            </p>
          </div>
        </div>
        <div v-else>
          <div
            style="width: 3rem; height: 1.5rem; border: 0.01rem dashed #c1c1c1"
          >
            <p
              @click="add"
              style="
                text-align: center;
                line-height: 1.5rem;
                font-size: 0.4rem;
                color: #c1c1c1;
              "
            >
              +添加
            </p>
          </div>
        </div>
      </div>
      <p
        style="
          height: 1rem;
          width: 100%;
          line-height: 1rem;
          border-bottom: 0.01rem solid #efefef;
          border-top: 0.01rem solid #efefef;
          margin-top: 0.8rem;
        "
      >
        <span style="float: left">首诊信息确认</span>
        <span
          style="float: left; margin-left: 3rem; color: #2769f7"
          @click="dian"
          v-if="zhi"
          >已填写</span
        >
        <span style="float: left; margin-left: 3rem" @click="dian" v-else
          >未填写</span
        >
        <span style="float: right; color: #ccc; margin-right: 0.5rem">></span>
      </p>
      <p style="margin-top: 5rem; font-size: 0.3rem;display: flex;">
        <van-checkbox v-model="checked"
          >我已阅读并同意</van-checkbox
        >
        <span style="color: #2769f7" @click="take">《风险告知及患者知情同意书》</span>
      </p>
      <p>
        <button
          style="
            background: #2769f7;
            color: #fff;
            width: 95%;
            height: 1rem;
            border: none;
            border-radius: 0.2rem;
          "
          v-if="wen"
          class="wenz"
          @click="zhao"
        >
          开始问诊
        </button>
        <button
          v-else
          style="
            background: #a0bbf5;
            color: #fff;
            width: 95%;
            height: 1rem;
            border: none;
            border-radius: 0.2rem;
          "
          @click="zhao"
        >
          开始问诊
        </button>
      </p>
      <!-- 圆角弹窗（底部） -->
      <van-popup
        v-model:show="showBottom"
        closeable
        round
        position="bottom"
        :style="{ height: '60%' }"
      >
        <p style="text-align: center; margin-top: 0.3rem; font-size: 0.4rem">
          填写线下医疗机构首诊信息
        </p>
        <p
          style="
            font-size: 0.3rem;
            color: #c1c1c1;
            margin-left: 0.4rem;
            height: 1rem;
            line-height: 1rem;
            border-top: 0.01rem solid #e9e8e8;
          "
        >
          说明：根据政策要求，您需要填写问诊人首诊信息
        </p>
        <p
          style="
            font-size: 0.3rem;
            margin-left: 0.4rem;
            height: 1rem;
            line-height: 1rem;
            border-top: 0.01rem solid #e9e8e8;
          "
        >
          <!-- 绑定data数据  点击出现弹出层 -->
          <van-cell title="首诊时间" :value="date" @click="show = true" />
          <!-- 底部弹出 -->
          <van-popup
            v-model:show="show"
            position="bottom"
            :style="{ height: '30%' }"
          >
            <!-- 通过绑定 currentDate 默认选择 -->
            <!-- 绑定onConfirm确认按钮关闭日期选择器，传入data值，将data值返回给 <van-cell title="首诊时间" :value="date" @click="show = true" /> -->
            <van-date-picker
              v-model="currentDate"
              @confirm="onConfirm"
              title="选择日期"
              :min-date="minDate"
              :max-date="maxDate"
          /></van-popup>
        </p>
        <p
          style="
            font-size: 0.3rem;
            margin-left: 0.4rem;
            height: 1rem;
            line-height: 1rem;
            border-top: 0.01rem solid #e9e8e8;
          "
        >
          <span style="margin-left: 0.3rem">首诊机构</span>
          <!-- border: none; -->
          <span style="float: right"
            ><input
              type="text"
              v-model="ji"
              placeholder="请输入首诊医疗机构名称"
              style="height: 1rem; line-height: 1rem; border: none"
          /></span>
        </p>
        <p
          style="
            font-size: 0.3rem;
            margin-left: 0.4rem;
            height: 1rem;
            line-height: 1rem;
            border-top: 0.01rem solid #e9e8e8;
          "
        >
          <span style="margin-left: 0.3rem">首诊诊断</span>
          <!-- border: none; -->
          <span style="float: right"
            ><input
              type="text"
              v-model="shou"
              placeholder="请输入首诊诊断疾病名称"
              style="height: 1rem; line-height: 1rem; border: none"
          /></span>
        </p>
        <p>
          <button
            style="
              width: 3rem;
              height: 1rem;
              background-color: #fff;
              border: 0.01rem solid #dbd9d9;
              border-radius: 0.2rem;
              margin-left: 0.4rem;
            "
            @click="qx"
          >
            取消
          </button>
          <button
            style="
              width: 3rem;
              height: 1rem;
              background-color: #2769f7;
              color: #fff;
              border: 0.01rem solid #dbd9d9;
              border-radius: 0.2rem;
              margin-left: 0.4rem;
            "
            @click="qr"
          >
            确认
          </button>
        </p>
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { showConfirmDialog } from 'vant'
import { checkNode } from 'element-plus/es/components/cascader-panel/src/utils.mjs'
const router = useRouter()
const out = () => {
  router.push('/picture')
}

// 获取姓名
const name = JSON.parse(localStorage.getItem('name'))
console.log(name)
// 获取关系
const doctor = JSON.parse(localStorage.getItem('doctor'))
console.log(doctor)
// 获取手机号
const sex = JSON.parse(localStorage.getItem('sex'))
console.log(sex)
// 获取性别  获取到的数据为boolen类型
const male = JSON.parse(localStorage.getItem('male'))
console.log(male)
// 创建一个新的空字符串
const ab = ref('')
// 判断是否获取到性别的boolen类型
if (male) {
  // 如果有获取到，则判断是true还是false
  if (male.value == true) {
    // 如果返回的是true，则赋值为女
    ab.value = '女'
  }
  // 否则赋值为男
  else {
    ab.value = '男'
  }
  console.log(ab.value)
}

// 获取出生日期
const birthday=localStorage.getItem('birthday')
console.log(birthday)
// 创建一个 calculateAgeFromDateString 函数 将出生日期传递参数给dateString，设置为字符串对象
function calculateAgeFromDateString(dateString:string) {
  // 创建出生日期对象 接参数
  const birthDate = new Date(dateString)
  // 创建一个当前日期对象
  const currentDate = new Date()
  // 计算年龄 用当前日期减去出生日期，将结果赋值给age
  let age = currentDate.getFullYear() - birthDate.getFullYear()
  // 创建一个月差对象 用当前减去出生日期的月份，将结果赋值给monthDiff
  const monthDiff = currentDate.getMonth() - birthDate.getMonth()
  // 如果月差值小于0 或者 月差值等于0，并且当前日期小于出生日期的日期，则年龄递减
  if (
    monthDiff < 0 ||
    (monthDiff === 0 && currentDate.getDate() < birthDate.getDate())
  ) {
    age--
  }
  // 返回年龄
  return age
}
// 示例用法，假设出生日期的字符串格式是'1990-05-10'
const age = calculateAgeFromDateString(birthday)
console.log(age)

// // 获取数据，转化为对象
// const dang = localStorage.getItem('dang')
// console.log(dang)
// const dangobj = JSON.parse(dang)
// const guan = localStorage.getItem('guan')
// console.log(guan)
// const guanobj = JSON.parse(guan)

// 添加信息
const add = () => {
  router.push('/danga')
}

// 圆角弹窗
const showBottom = ref(false)

// 点击出现弹出层
const dian = () => {
  showBottom.value = true
}

const date = ref('')
const show = ref(false)

// 选择完成后返回的时间
const formatDate = date => {
  //   return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  console.log(date.selectedValues)
  return `${date.selectedValues[0]}/${date.selectedValues[1]}/${date.selectedValues[2]} >`
}
// 将返回的时间赋值给date
const onConfirm = value => {
  show.value = false
  date.value = formatDate(value)
}

// 日期选择器默认选择的时间
const currentDate = ref(['2021', '01', '01'])
// 给日期选择器设置最小时间
const minDate = new Date(2020, 0, 1)
// 给日期选择器设置最大时间
const maxDate = new Date(2025, 5, 1)

// 点击取消
const qx = () => {
  showBottom.value = false
}

// 首诊机构名称
const ji = ref('')
// 首诊诊断疾病名称
const shou = ref('')

// 点击确认
const qr = () => {
  if (ji.value == '') {
    showToast('请填写首诊医疗机构名称')
  } else if (shou.value == '') {
    showToast('首诊诊断至少2字')
  } else {
    showBottom.value = false
    localStorage.setItem('zhi', ji.value + shou.value)
  }
}

// 点击问诊人信息
const start = () => {
  document.querySelector('.wen').style.borderColor = '#2769f7'
  localStorage.setItem('wen', '1')
}

const wen = localStorage.getItem('wen')

const zhi = localStorage.getItem('zhi')

const checked = ref(false)

// 点击开始问诊
const zhao = () => {
  if (!wen) {
    showToast('请选择为谁咨询')
  } else if (checked.value == false) {
    // showToast('请勾选同意《知情同意书》')
    const beforeClose = action =>
      new Promise(resolve => {
        setTimeout(() => {
          // action !== 'confirm'  拦截取消操作
          resolve(action === 'confirm')
          checked.value = true
          router.push('/zhi')
        }, 1000)
      })

    showConfirmDialog({
      title: '',
      message:
        '为了更好的保障您的合法权益，请您阅读并同意《风险告知及患者知情同意书》',
      beforeClose,
    })
  } else {
    router.push('/zhi')
  }
}

// 风险告知及患者知情同意书
const take=()=>{
  router.push('/take')
}
</script>

<style>
.bb {
  background: #a0bbf5;
}
</style>
